<script setup>
import { onMounted, ref, watchEffect } from "vue";
const emit = defineEmits(["change"]);
const props = defineProps({
  titleName: {
    type: String,
    deafault: "",
  },
  list: {
    type: Array,
    deafault: () => [],
  },
  activeList: {
    type: Array,
    deafault: () => [],
  },
  mianHeight: {
    type: String,
    deafault: "",
  },
});
const reflectList = ref([]);
watchEffect(() => {
  if (props.activeList) {
    reflectList.value = JSON.parse(JSON.stringify(props.activeList));
    if (props.activeList?.length) {
      if (props.activeList?.length != props.list.length) {
        isIndeterminate.value = true;
        checkAll.value = false;
      } else {
        checkAll.value = true;
        isIndeterminate.value = false;
      }
    } else {
      checkAll.value = false;
      isIndeterminate.value = false;
    }
  }
});

const checkAll = ref(false);
const isIndeterminate = ref(false);
const handleCheckedCitiesChange = (value) => {
  // const checkedCount = value.length;
  // checkAll.value = checkedCount === props.list.length;
  // isIndeterminate.value = checkedCount > 0 && checkedCount < props.list.length;
  emit("change", reflectList.value);
};
const handleCheckAllChange = (val) => {
  reflectList.value = val ? props.list.map((v) => v.value) : [];
  // isIndeterminate.value = false;
  emit("change", reflectList.value);
};
</script>
<template>
  <div>
    <div class="headTitle">
      {{ titleName }}
    </div>
    <div
      class="mains flex flex-direction-column pl10 pr10"
      :style="'height:' + (mianHeight || '450px')"
    >
      <el-checkbox
        class="checkboxAllLabel"
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
        ><span class="checkboxLabel">全选</span></el-checkbox
      >
      <el-checkbox-group
        v-model="reflectList"
        class="flex flex-direction-column"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="item in list" :key="item.value" :label="item.value"
          ><span class="checkboxLabel">{{ item.label }}</span></el-checkbox
        >
      </el-checkbox-group>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mains {
  border: 1px solid #dddddd;

  max-width: 170px;
  overflow: auto;
}
.headTitle {
  color: #000000;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 14px;
  background: #dddddd;
  padding: 9px 10px;
  width: 170px;
}
.checkboxLabel {
  width: 102px;
  color: #000000;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 14px;
}
.checkboxAllLabel {
  height: auto;
  line-height: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}
</style>
